<template>
  <div id="footer">
    <ul>
      <li v-for="item in menus">
        <router-link
          :to="item.path"
          :class="[
            item.isActive ? 'active-item' : '',
            item.name === '首页' ? 'home' : '',
          ]"
          >{{ item.name }}</router-link
        >
      </li>
    </ul>
  </div>
</template>

<script setup>
import router from '@/router';
import menusData from '@/store/menuData';
import { ref, watch, onMounted } from 'vue';
import {
  removeAllCones,
  removeAllBillboards,
  removeAllStations,
  renderStation,
  renderStationBill,
  flyToDefaultView
} from '@/cesiumTools/effectController';
import { useLineData } from '@/store';
import { getLine } from '@/api/line';
const menus = ref(menusData);
const lineDataStore = useLineData();
const subLineData = ref();
let viewer;
onMounted(async () => {
  viewer = lineDataStore.Viewer;
  subLineData.value = await getLine();
});
watch(router.currentRoute, (newVal, oldVal) => {
  menus.value = menus.value.map((n) => {
    if (n.path === newVal.path) {
      flyToDefaultView(viewer);
      n.isActive = true;
      removeAllCones(viewer);
      if (oldVal.path === '/station') {
        console.log(lineDataStore.allLineEnts, 'lineDataStore.allLineEnts')
        lineDataStore.allLineEnts.forEach((item) => {
          item && viewer.entities.remove(item);
        })
        leaveRouteDesign();
      }
    } else {
      n.isActive = false;
    }
    return n;
  });
});
const removeActiveEnts = () => {
  removeAllBillboards();
  removeAllStations(viewer);
};

// 清除路径规划
const leaveRouteDesign = () => {
  removeActiveEnts();
  // 显示所有线路
  const lineNames = subLineData.value.map((item) => item.name); // 获取所有站线名称
  lineDataStore.displayLine(lineNames, true);
  // 还原站点
  subLineData.value.forEach((item) => {
    const color = item.color;
    const stationsList = item.stationsList;
    const options = {
      color: color,
      name: '',
      positions: [],
    };
    stationsList.forEach((station) => {
      options.positions = station.position;
      options.name = station.name;
      renderStation(viewer, options);
      renderStationBill(viewer, {
        position: station.position,
        name: station.name,
        color: color,
        attr: {
          name: station.name,
        },
      });
    });
  });
};
</script>

<style scoped>
#footer {
  width: 100%;
  height: 73px;
  position: absolute;
  left: 50%;
  bottom: 0.521vw;
  transform: translateX(-50%);
  background: url('../assets/uiResources/footer.png');
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
  z-index: 1000;
}

#footer ul .active-item {
  color: #ec9b02;
  font-size: 12px;
}

#footer ul {
  width: 28%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  list-style: none;
  margin-top: 24px;
}

#footer ul a {
  color: #fff;
  font-size: 12px;
  text-decoration: none;
}

#footer ul li {
  color: #fff;
  cursor: pointer;
}

#footer ul a:hover {
  color: rgb(97, 89, 89);
}

#footer ul .home {
  display: inline-block;
  transform: translateY(-3px);
}
</style>
